<template>
    <div class="hello">
        <header-tab :backUrl="'/home'" msg="奖品池"></header-tab>
        <div class="topBox">
            <img :src="jpImg" alt="" class="topImg">
        </div>
        <div class="bottomBox m0 mb10 " v-for="item in marketGoodsList" :key="item.index">
            <div class="box sa" @click="goGoodsDetail(item.activityProductNo)">
                <div class="imgBox w mr20">
                    <img :src="item.listThumbnailImage" alt="" class="imgBox">
                </div>
                <div class="fz">{{ item.productName }}
                    <div class="gray">购买此商品可使用 <span class="r w"> {{  item.deductionBeibi }} 呗币</span> 抵扣</div>
                </div>

            </div>
            <div class="spacebetween terBox">
                <div class="sr fzbox ">
                    <div class="r fz">￥ {{ item.salePrice}}</div>
                    <div class="gray fz" style="text-decoration:line-through;">￥ {{ item.marketPrice }}</div>
                </div>
                <div class="buy w dflex"  @click="goGoodsDetail(item.activityProductNo)">立即购买</div>
            </div>
        </div>
    </div>
</template>

<script>
import HeaderTab from '../components/HeaderTab'
import {
    getAllToken,
    setAllToken
} from '@/utils/auth'
import {
    goods_Details
} from '../api/index.js'
import {
    Toast
} from 'vant';

export default {
    components: {
        HeaderTab,
        [Toast.name]: Toast
    },
    data() {

        return {
            jpImg: 'https://cdn.92jiangbei.com/third/bc-guess-up-down-h5/img/jpchi.png',
            marketGoodsList: [],
            bbPadding: 500
        }
    },
    mounted() {
        this.getMarketsGoodsList()

    },
    methods: {
        backPreview() {
            this.$router.push('/home');
        },
        loginIn() {
            this.$router.replace("/login");
        },
        getMarketsGoodsList() {

            goods_Details().then((res) => {
                console.log("奖品池==================================>res", res)
                if (res.data.code == "000") {
                    this.marketGoodsList = res.data.content
                } else {
                    Toast(`${res.data.desc}`)
                }
            })
        },

        goGoodsDetail(activityProductNo) {
            console.log(this.marketGoodsList, activityProductNo)
            this.memberNo = this.$store.state.user.memberNo || getAllToken("memberNo");
            if (this.memberNo) {
                // console.log(3423432)
                // 生产环境
                // location.href=`https://prizejiangbei.92jiangbei.com/#/goods/detail?productNo=${activityProductNo}`
                //uat环境
                window.location.href = `https://uatprizejiangbei.92jiangbei.com/#/goods/detail?productNo=${activityProductNo}&style=0`
                // window.location.href = `https://prizejiangbei.92jiangbei.com/#/goods/detail?productNo=${activityProductNo}&style=0`
            } else {
                this.loginIn();
            }
        },

    }
}
</script>

<style lang="less" scoped>
.topBox {
    width: 100%;
    margin-bottom: 10px;

    .topImg {
        height: 140px;
        width: 100%;
    }
}

[v-cloak] {
    display: none;
}

.bottomBox {
    width: 95%;
    height: 136px;
    border-radius: 10px;
    box-shadow: 0px 0px 8px gray;

    .box {
        height: 91px;
        border-radius: 10px;
        padding: 0 20px 0 20px;

        .imgBox {
            width: 54px;
            height: 59px;

        }
    }

    .terBox {
        padding: 0 20px 0 20px;

        .fzbox {
            width: 100px;
        }

        .buy {
            width: 66px;
            height: 30px;
            border-radius: 5px;
            background-color: #672CAB;
        }
    }

}
</style>
